<template>
	<div id="login_vue">
		<div class="login_box">
			<div class="login_title">{{ title }}</div>

			<!-- 登录表单 -->
			<el-form ref="loginFormRef" :model="loginForm" :rules="rules" class="login_form">
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" placeholder="账号">
						<i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" type="password" placeholder="密码">
						<i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
					</el-input>
				</el-form-item>
				<el-form-item prop="code" class="imageBox">
					<el-input v-model="loginForm.code" type="code" placeholder="验证码">
						<i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
					</el-input>
					<div class="image" @click="getImageCode">
						<img :src="image" width="110" height="36" alt="" />
					</div>
				</el-form-item>
			</el-form>
			<div class="submitBtn">
				<el-button type="primary" @click="login" style="width: 100%; background-color: #2f9688; border-color: #2f9688">登 录</el-button>
			</div>
		</div>
		<!-- 备案信息 -->
		<!-- <div class="beian">Copyright © 2021-2022 weibo <a href="#"> 渝ICP195002365-2</a></div> -->
	</div>
</template>

<script>
import { login, imageCode } from "@/api/login";
import { generateUUID } from "@/utils/index";
import { setToken } from '@/utils/auth'
export default {
	name: "Login",
	data() {
		return {
			title: "vue-myAdmin",
			loginForm: {
				username: "",
				password: "",
				uuid: '',
				code: ""
			},
			rules: {},
			image: null
		};
	},
	created() {
		this.getImageCode();
	},
	methods: {
		// 获取图形验证码
		async getImageCode() {
			this.loginForm.uuid = generateUUID();
			const res = await imageCode({ uuid: this.loginForm.uuid });
			// 将返回的图片数据转换为base64格式
			this.image = "data:image/jpg;base64," + res.data.img;
		},
		transformArrayBufferToBase64(buffer) {
			let binary = "";
			const bytes = new Uint8Array(buffer);
			for (let len = bytes.byteLength, i = 0; i < len; i++) {
				binary += String.fromCharCode(bytes[i]);
			}
			return window.btoa(binary);
		},
		// 登录
		async login() {
			// 手动验证
			if (this.loginForm.username && this.loginForm.code) {
				const res = await login(this.loginForm);
				const token = res.data.token;
				this.$store.commit("user/SET_TOKEN", token);
				setToken(token)
				this.$message.success("登录成功");
				this.$router.push("/").catch(() => {});
			} else {
				this.$message.warning("参数不完整");
			}
		}
	}
};
</script>

<style lang="scss" scoped>
#login_vue {
	width: 100%;
	height: 100%;
	background-color: #393d49;
}
.login_box {
	width: 450px;
	height: 380px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.login_title {
	text-align: center;
	font-size: 26px;
	color: #fff;
	margin-bottom: 25px;
}
.login_form {
	margin: 30px 0;
}
</style>
<style lang="scss">
#login_vue {
	.el-form-item__label {
		color: #fff;
	}
	.el-input--prefix .el-input__inner {
		padding-left: 36px;
	}
	.el-input__inner {
		color: #fff;
		background-color: #323540;
		// background-color: #2f9688;
		border-color: #4c4c4e;
	}
	.imageBox .el-form-item__content {
		display: flex;
		justify-content: space-between;
		.image {
			height: 36px;
			padding-left: 15px;
			padding-top: 2px;
			cursor: pointer;
		}
	}
}
</style>
